<template>
	<view class="pr">
		<image class="bg pa" src="/static/image/mine/bg1.png" mode=""></image>
		<u-navbar title="取消成功" bgColor="#ffffff00" titleStyle="{color: '#fff';}" :fixed="false" :autoBack="true">
			<template v-slot:left>
				<view class="xflex-x">
					<image class="fh" src="/static/image/mine/fanhui.png" mode=""></image>
					
				</view>
			</template>
		</u-navbar>

		<view class="main">
			<!-- <u-swiper :list="list3" previousMargin="30" :height="176" nextMargin="30" circular :autoplay="false"
				radius="5" bgColor="#ffffff00">

				<template #title>
					<view class="indicator">
						1
					</view>
				</template>
			</u-swiper> -->

			<!-- <view class="hys">
				<view class="">
					<view class="xflex-x">
						<image class="hys-icon" src="/static/image/mine/hyicon.png" mode=""></image>
						<view class="hys-name">
							小白驹
						</view>
						
					</view>
					<view class="hys-tips">
						升级会员享更多福利及优惠
					</view>
				</view>
				
				
				<view class="">
					<view class="xflex-x-between">
						<view class="hys-num">
							<text>329</text>/500 骊客金豆
						</view>
						
						<view class="hys-num">
							500金豆
						</view>
					</view>
					
					<view class="xflex-x-between">
						<view class="hys-num">
							<text>329</text>/500 骊客金豆
						</view>
						
						<view class="hys-num">
							500金豆
						</view>
					</view>
				</view>
				
			</view> -->

			<swiper class="swiperBox" next-margin="55rpx" previous-margin="55rpx" :circular="false"
				@change="swiperChange">
				<swiper-item class="swiperItem pr" v-for="(item,index) in viplist" :key="index">
					<view class="swiperWrap">
						<view class="swiperPic">
							<image class="swiperbg" :src="item.image"></image>
						</view>
						<view class="swiperCon pa xflex-y-between xai">
							<view class="">
								<view class="swiperCon-top xflex-x">
									<image class="swiperCon-top-icon" :src="item.icon" mode=""></image>
									<view class="swiperCon-top-name" :style="{color:item.color,}">
										{{item.name}}
									</view>
								</view>
								<view class="swiperCon-top-tips" :style="{color:item.color,}">
									升级会员享更多福利及优惠
								</view>
							</view>
							
							<view class="">
								<view class="xflex-x-between">
									<view class="swiperCon-jd" :style="{color:item.color,}">
										{{bean}}/{{item.max}} 骊客金豆
									</view>
									<view class="swiperCon-num" :style="{color:item.color,}">
										{{item.max}}金豆
									</view>
								</view>
								<view class="swiperCon-prog pr xmt12">
									<view class="swiperCon-progs pa" :style="getTypeName(item)" >
										
									</view>
								</view>
								
								
								<view class="xflex-x-between xmt10">
									<view class="swiperCon-lv" :style="{color:item.color,}">
										{{item.start}}
									</view>
									<view class="swiperCon-lv" :style="{color:item.color,}">
										{{item.end}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

		</view>
	</view>

	<view class="xpt40">
		<view class="hy pr xmb40">
			<image class="hybg pa" src="/static/image/mine/hybj.png" mode=""></image>
			<view class="hytext pa">
				{{viplist[index].name}}({{viplist[index].alias}}）
			</view>
		</view>

		<view class="hyqi">
			<view class="hyqi-item xflex-x" v-for="(items,index) in viplist[index].privileges" :key="index">
				<view class="xml32 xmr50">
					<image class="hyqi-icon" :src="items.image" mode=""></image>
					<view class="hyqi-text">
						{{items.name}}
					</view>
				</view>

				<view class="hyqi-info">
					{{items.intro}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';


	import {
		levellists,
		userInfo
	} from '/network/home.js'




	let index = ref(0)
	
	
	const swiperChange = (e) =>{
		// console.log(e);
		index.value = e.detail.current
	}
	
	// 获取个人豆子
	let bean = ref(0)
	userInfo().then(res=>{
		bean.value = res.data.bean
	})
		

	const list = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	]);

	let cardList = ref([{
			image: 'path/to/image1.jpg',
			title: '卡片标题1'
		},
		{
			image: 'path/to/image2.jpg',
			title: '卡片标题2'
		},
		{
			image: 'path/to/image3.jpg',
			title: '卡片标题3'
		},
	])
	let viplist = ref([])
	const getlevellists = () => {
		levellists().then(res => {
			console.log(res);
			viplist.value = res.data
		})
	}
	
	let getTypeName = computed(()=>(item)=>{
		return{
			width: (bean.value<item.max &&  bean.value>item.min)?(bean.value/item.max)*100 +'%':bean.value<item.min?'0%':'100%',
			background:item.color
		}
	})

	getlevellists()
</script>

<style lang="scss">
	.fh {
		width: 36rpx;
		height: 36rpx;
		margin-right: 17rpx;
	}
	.bg {
		width: 100%;
		height: 628rpx;
		z-index: -1;
	}

	.main {
		z-index: 1;
		margin-top: 91rpx;
		margin-bottom: 65rpx;
		padding-bottom: 60rpx;
		
	}

	.hy {
		/* margin: auto; */
		text-align: center;
	}

	.hybg {
		width: 499rpx;
		height: 4rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.hytext {
		left: 50%;
		transform: translate(-50%, -50%);
		top: 0;

		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #7F664A;
	}

	.hys {
		width: 630rpx;
		height: 306rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx 46rpx;


		&-icon {
			width: 53rpx;
			height: 40rpx;
			margin-right: 13rpx;
		}

		&-name {
			font-family: DingTalk JinBuTi;
			font-weight: 400;
			font-size: 44rpx;
			color: #159DFE;
		}

		&-tips {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #159DFE;
		}

		&-num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #159DFE;

			&>text {

				color: #159DFE;
			}
		}
	}

	.hyqi {
		padding-top: 40rpx;

		&-item {
			width: 690rpx;
			height: 140rpx;
			background: #FFF7EC;
			border-radius: 20rpx;
			border: 1px solid #E5B677;
			margin: auto 32rpx;
			margin-bottom: 20rpx;

		}

		&-icon {
			width: 88rpx;
			height: 88rpx;
		}

		&-text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #D2A073;
		}

		&-info {
			width: 471rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #7F664A;
		}
	}

	.swiper {
		height: 306rpx;
		

		.main-card {
			margin: 50rpx auto;
			border-radius: 30rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			.local-pic {
				width: 100%;
				height: 390rpx;
				border-radius: 30rpx;
				background-color: #eb6966;
			}

			.about-info {
				line-height: 40rpx;
			}
		}

		.current-card {
			height: 700rpx;
			transition: all 0.6s;
		}

		.side-card {
			height: 640rpx;
			margin-top: 80rpx;
			transition: all 0.6s;
		}
	}
	
	.swiperCon {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		// background-color: #fff;
		padding: 26rpx 40rpx;
		box-sizing: border-box;
		&-top{
			
			&-icon {
				width: 68rpx;
				height: 68rpx;
			}
			&-name {
				font-family: DingTalk JinBuTi;
				font-weight: 400;
				font-size: 44rpx;
				color: #159DFE;
			}
			&-tips {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #159DFE;
			}
		}
		
		&-prog {
			width: 100%;
			height: 8rpx;
			background: #E7F8FD50;
			border-radius: 4rpx;
		}
		&-progs {
			// width: 50%;
			height: 8rpx;
			// background: #159DFE;
			border-radius: 4rpx;
			left: 0;
		}
		
		&-jd {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #159DFE;
		}
		
		&-num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #159DFE;
		}
		
		&-lv {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #159DFE;
		}
		
		
		
	}
	.swiperPic{
		width: 100%;
		height: 100%;
	}
	.swiperWrap{
		width: 630rpx;
		height: 100%;
	}
	.swiperbg {
		width: 100%;
		height: 100%;
	}
</style>